<template>
  <base-scroll :options="scrollOptions">
    <div class="discover" ref="discover">
      <home-swiper/>
      <home-recommend/>
      <home-playlist/>
      <home-newest/>
      <home-hot-song/>
      <home-dj/>
    </div>
  </base-scroll>
</template>

<script>
import HomeSwiper from './components/HomeSwiper'
import HomeRecommend from './components/HomeRecommend'
import HomePlaylist from './components/HomePlaylist'
import HomeNewest from './components/HomeNewest'
import HomeHotSong from './components/HomeHotSong'
import HomeDj from './components/HomeDj'
import scrollMixin from '@/mixins/scroll'

export default {
  name: 'discover',
  mixins: [scrollMixin],
  components: {
    HomeSwiper,
    HomeRecommend,
    HomeNewest,
    HomePlaylist,
    HomeHotSong,
    HomeDj
  },
  mounted () {
    // 处理缓存
    if (!this.$storage.hasCache('toplist')) {
      this.initData()
      // return console.log('toplist 未缓存或已失效，重新请求数据.')
    }
    // console.log('toplist 未过期，读取缓存：', this.$storage.getItem('toplist'))
  },
  methods: {
    initData () {
      // Todo: 优化请求
      this.$api.getToplistDetail().then(res => {
        const { list } = res.data
        // console.log(list)
        // 保存至 localStorage，有效时间为 10 分钟
        this.$storage.setItem('toplist', list, true, {
          ctime: Date.now(),
          maxAge: 10 * 60 * 1000
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.discover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
</style>
